<template>
  <div style="display: flex; height: 100%">
    <div style="flex: 0 0 240px">
      <div
        style="
          font-size: 32px;
          font-weight: bold;
          text-align: center;
          color: #1677ff;
        "
      >
        <CommentOutlined />
        CCSC QA
      </div>
    </div>
    <div style="flex: 1 1 auto">
      <div style="display: flex; flex-direction: column; height: 100%">
        <div style="flex: 0 0 24px; padding: 8px">
          <a-tooltip>
            <template #title>Expand</template>
            <a-button style="height: 30px" size="small">
              <MenuFoldOutlined />
            </a-button>
          </a-tooltip>
        </div>
        <div style="flex: 1 1 auto; padding: 8px;overflow: auto"> 

          <div
            style="display: flex; padding: 16px"
            v-for="item in list"
            :key="item.id"
          >
            <div style="flex: 0 0 24px">
              <a-avatar :src="robbot" v-if="item.role == 'assistant'" />
              <a-avatar :src="user" v-else />
            </div>
            <div style="flex: 0 0 8px"></div>
            <div style="flex: 1 1 auto">
              <div style="border-radius: 8px; background: #eee; padding: 8px">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>

        <div style="flex: 0 auto; padding: 8px; display: flex">
          <div style="flex: 0 0 100px"></div>
          <div style="flex: 1 1 auto">
            <a-textarea placeholder="Input your question here ." :rows="4" v-model:value="question"/>
            <div style="display: flex; margin-top: 8px; margin-bottom: 8px">
              <div style="flex: 1 1 auto">
                <a-space>
                  <a-tooltip>
                    <template #title>Upload Files</template>
                    <a-button style="height: 30px" size="small">
                      <FileImageOutlined />
                    </a-button>
                  </a-tooltip>

                  <a-tooltip>
                    <template #title>Setting</template>
                    <a-button style="height: 30px" size="small">
                      <SettingOutlined />
                    </a-button>
                  </a-tooltip>

                  <a-tooltip>
                    <template #title>Knowledge Library</template>
                    <a-button style="height: 30px" size="small">
                      <BookOutlined />
                    </a-button>
                  </a-tooltip>
                </a-space>
              </div>
              <div style="flex: 0 0 150px">
                <a-space>
                  <a-dropdown>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="1">
                          <UserOutlined />
                          Qwen:7b
                        </a-menu-item>
                        <a-menu-item key="2">
                          <UserOutlined />
                          Deepseek:8b
                        </a-menu-item>
                        <a-menu-item key="3">
                          <UserOutlined />
                          Deepseek:1.5b
                        </a-menu-item>
                      </a-menu>
                    </template>
                    <a-button>
                      Deepseek:7b
                      <DownOutlined />
                    </a-button>
                  </a-dropdown>

                  <a-tooltip>
                    <template #title>Submit your question</template>
                    <a-button type="primary" style="height: 30px" size="small" @click="submitQuestion">
                      <ArrowUpOutlined />
                    </a-button>
                  </a-tooltip>
                </a-space>
              </div>
            </div>
          </div>
          <div style="flex: 0 0 100px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  UserOutlined,
  BookOutlined,
  CommentOutlined,
  DownOutlined,
  SettingOutlined,
  ArrowUpOutlined,
  ArrowLeftOutlined,
  MenuFoldOutlined,
  FileImageOutlined,
  SettingFilled,
  LoginOutlined,
  LogoutOutlined,
} from "@ant-design/icons-vue";
import robbot from "@/assets/images/robbot.png";
import user from "@/assets/images/user.png";

import { ref } from "vue";

const list = ref([
  {
    id: "1",
    text: "地球为什么是圆的",
    role: "user",
  },
  {
    id: "2",
    text: "因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，，因为它叫地`球`，因为它叫地`球`，",
    role: "assistant",
  },
  {
    id: "3",
    text: "蜗牛是牛吗",
    role: "user",
  },
  {
    id: "4",
    text: "是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小",
    role: "assistant",
  },
  {
    id: "5",
    text: "地球为什么是圆的",
    role: "user",
  },
  {
    id: "6",
    text: "因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，因为它叫地`球`，，因为它叫地`球`，因为它叫地`球`，",
    role: "assistant",
  },
  {
    id: "7",
    text: "蜗牛是牛吗",
    role: "user",
  },
  {
    id: "8",
    text: "是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小，是的,因为它叫蜗`牛`,但是这个牛很小",
    role: "assistant",
  },
]);

const question = ref("");

const submitQuestion = async()=>{
  alert(question.value)
}

const fetchSSE = async (messages, options) => {
  // 解构配置对象中的事件处理函数
  const { onMessage, onError, onComplete } = options;

  // 创建AbortController以支持取消请求
  const controller = new AbortController();
  // 获取AbortSignal用于fetch请求
  const { signal } = controller;
  // 将控制器赋值给全局或父作用域变量，以便于外部取消请求
  fetchAbort.value = controller;

  const model = selectValue.value.value;

  // 发起fetch请求，获取SSE响应
  const resPromise = fetch("http://localhost:11434/api/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      messages, // 消息列表
      model: model, // 模型
      stream: true, // 流式
    }),
    signal,
  });

  // 处理响应
  resPromise
    .then(async (response) => {
      // console.log("response", response);

      // 检查HTTP状态码，如果非200，则调用错误处理函数并抛出错误
      if (!response.ok) {
        const { status } = response;
        onError(`HTTP error! status: ${status}`);
        throw new Error(`HTTP error! status: ${status}`);
      }

      // 获取响应体的Reader对象，用于逐块读取数据
      const reader = response.body.getReader();
      // 创建TextDecoder对象，用于解码数据块
      const decoder = new TextDecoder("utf-8");
      // 初始化缓冲区
      let buffer = "";
      // 循环读取数据块
      while (true) {
        // 读取下一数据块
        const { done, value } = await reader.read();
        // 如果done为true，则表示数据读取完毕
        if (done) {
          console.log("Stream complete");
          // 调用完成处理函数
          onComplete();
          return Promise.resolve();
        }

        // 将数据块解码为字符串并追加到缓冲区
        buffer += decoder.decode(value, { stream: true });
        // 按行分割缓冲区内容
        const lines = buffer.split("\n");
        // 更新缓冲区内容，保留未完整的一行
        buffer = lines.pop();
        // 遍历每一行数据
        for (const line of lines) {
          // 忽略空行
          if (line.trim() === "") continue;
          try {
            // 解析JSON数据
            const chunk = JSON.parse(line);
            // 如果数据块表示传输完成，则跳出循环
            if (chunk.done) {
              break;
            }
            // 如果数据块包含消息内容，则调用消息处理函数
            if (chunk.message && chunk.message?.content) {
              const { content } = chunk.message;
              // 调用消息处理函数
              onMessage(content);
            }
          } catch (error) {}
        }
      }
    })
    .catch((error) => {
      // 错误处理
      console.log("error", error);
    });
};
</script>

<style>
</style>